[Amazon Connect]CloudFront + S3 + チャットウィジェット機能を利用してWebサイト上にチャット機能を実装する

Amazon Connect ChatをCloudFront、S3と合わせて実装してみる

#Amazon Connect

#Amazon Connect Chat

#Amazon S3

#Amazon CloudFront

洲崎義人

2022.07.21

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Amazon Connect Chatを利用したデモサイトを作成する機会がありました。
Amazon Connectのチャットウィジェット機能を利用することで、簡単にチャット画面を作成できましたので紹介します。

Amazon Connect Chatとは

Amazon Connect ChatとはAmazon Connectで利用できるチャット機能です。
オペレーターはAmazon Connectと同じユーザーインターフェイスを利用しながら、1つのツールで電話・チャット両方の対応が可能になります。

顧客側のチャット画面はJavascriptで組まれているのですが、Amazon Connect画面から行うとJavascriptのコードを簡単に生成することができます。
今回はAmazon CloudFront、Amazon S3も利用してAmazon Connect Chatを実装してみます。

実装済みの画面

先に、実装した画面をお見せします。

左側がチャットの問い合わせ画面、右のCCPがチャット受付のオペレーターの画面になります。
左側のページを作成していきます。

実装

Amazon S3

AWSマネジメントコンソールからAmazon S3に飛んで、今回利用するバケットを作成します。

バケット名は一意のもので指定します。
パブリックアクセスは、CloudFrontのオリジンアクセスアイデンティティ (OAI)を利用するため、全てブロックで設定します。
あとはデフォルトのまま進み、右下のバケットを作成をクリックします。

CloudFront

AWSマネジメントコンソールからAmazon CloudFrontに飛び、ディストリビューションを作成します。
オリジンドメインは先ほど作成したS3バケットを選択します。
S3バケットアクセスはOAI利用を選択し、オリジンアクセスアイデンティティは『新しいOAIを作成』し、バケットポリシーを自動で更新します、にチェックを入れます。

その他はデフォルトで進み、ディストリビューションを作成をクリックします。
ディストリビューションが作成されたら、CloudFrontのドメイン名を控えておきます。

Amazon Connect Chat

Amazon Connectのコンソールに飛び、左のサイドメニューから『チャットウィジェット』をクリックします。

ヘッダーメッセージは窓口名等を入力し、ヘッダーの色等を好みに合わせて設定します。
コンタクトフローのところで、チャットで利用するフローを選択します。(コンタクトフローを利用できます)
チャットのフローについて、下記ブログもご参照ください。

設定ができたら、チャットウィジェットに必要なドメインを追加のところで、CloudFrontのところで控えたCloudFrontのドメインを入力します。
新しいチャットリクエストにセキュリティを追加、のところは今回はスキップし、右下の保存をクリックします。

JSONウェブトークンを利用する方法について下記ドキュメントを参照ください。

チャットウィジェットのスクリプトがJavascriptで払い出されるので、『スクリプトをコピー』をクリックします。

htmlファイルを作成し、任意のエディタを開きコピーしたスクリプトを貼り付けます。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <h1>ようこそ洲崎窓口へ</h1>
    <p>問い合わせは右下のボタン(チャット)をご利用ください</p>
<!-- コピーしたスクリプトを貼り付ける -->
<script type="text/javascript">
    (function(w, d, x, id){
      s=d.createElement('script');
      s.src='https://xxxxx.cloudfront.net/amazon-connect-chat-interface-client.js';
      s.async=1;
      s.id=id;
      d.getElementsByTagName('head')[0].appendChild(s);
      w[x] =  w[x] || function() { (w[x].ac = w[x].ac || []).push(arguments) };
    })(window, document, 'amazon_connect', 'xxxxxxx-1496-4592-8291-4d7fe1d3ba4e');
    amazon_connect('styles', { openChat: { color: 'white', backgroundColor: '#123456'}, closeChat: { color: 'white', backgroundColor: '#123456'} });
    amazon_connect('snippetId', 'QVFJREFIZ2hQL0pvd1JoM1RkT2R1L3NXL3lNdml6dmxkWnl0QVhSZkNxL24zazB4MUFFcHB5bmNnZGI5SXNISUdYZFFLUENBQUFBQWJqQnNCZ2txaGtpRzl3MEJCd2FnWHpCZEFnRUFNRmdHQ1NxR1NJYjNEUUVIQVRBZUJnbGdoa2dCWlFNRUFTNHdFUVFNOHF4QnI0Zk5sL3FEWFdKVEFnRVFnQ3ZyQ3d4UDNrd0FvVkwxZWN0MnJnc0lBZjgwcGd3WE8xRHpnd2F0emtZb3JIclVoQ2dBekdRL2RHVEE6OkdSTHN2UlJQeUM1UXFIVjNRek5mR1REWHNSSndWU05lN1F5U21DUXBHODgvQmNIM0RRK2FQOFYzVnpIV2pxdW5MZzl2bm55MTF6TU13cWZjakhWczRxQWFsdURHU0NIRmQ4T3B1TjNYM2hoU2JBUU10Q2lmemd3MFZ6eHUra1laRWJPTXZWSkRkY3MzYlN2QTRkOVY0Sm9FaHV1U2JRND0=');
    amazon_connect('supportedMessagingContentTypes', [ 'text/plain', 'text/markdown' ]);
  </script>
<!-- / コピーしたスクリプトを貼り付ける -->
  </body>
</html>

作成できたら、作成したS3バケットにアップロードします。

CloudFrontのドメインにアクセスして、チャット画面が表示されたら完成です！

最後に

Amazon Connect ChatをCloudFront、S3と合わせて実装してみました。
Javascriptのコード自体はAmazon Connectのチャットウィジェットで生成されるので簡単に実装できるようになってました。
Amazon Connectを導入している方はぜひチャットも試してみてはいかがでしょうか。

ではまた！コンサルティング部の洲崎でした。